<script setup lang="ts">
import Menubar from 'primevue/menubar';
import { ref } from 'vue';
import Button from 'primevue/button';

const vIcon = ref('pi pi-sun')
const items = ref([
  {
    label: '首页',
    icon: 'pi pi-home',
    route: '/'
  },
  {
    label: '分类',
    icon: 'pi pi-book',
    route: '/'
  },
  {
    label: '排行',
    icon: 'pi pi-crown',
    route: '/top'
  },
  {
    label: '更新',
    icon: 'pi pi-sparkles',
    route: '/about'
  },
  {
    label: 'AI问答',
    icon: 'pi pi-comment',
    route: '/ai'
  },
  {
    label: 'DeepSeek',
    icon: 'pi pi-link',
    url: 'https://www.scnet.cn/ui/chatbot/',
    target: '_blank'
  }
])

function toggleDardMode() {
  document.documentElement.classList.toggle('dark');
  vIcon.value = vIcon.value === 'pi pi-moon' ? 'pi pi-sun' : 'pi pi-moon';
}
</script>

<template>
  <Menubar :model="items" class="menu__bar">
    <template #start>
      <img width="35" height="40" src="@/assets/images/book.svg" class="logo">
      <p class="logo__text">智慧阅读</p>
    </template>
    <template #item="{ item, props }">
      <router-link v-if="item.route" v-slot="{ navigate }" :to="item.route" custom>
        <a v-bind="props.action" @click="navigate">
          <i :class="item.icon" />
          <span>{{ item.label }}</span>
        </a>
      </router-link>
      <a v-else :href="item.url" :target="item.target" v-bind="props.action">
        <span :class="item.icon" />
        <span>{{ item.label }}</span>
      </a>
    </template>
    <template #end>
      <div>
        <Button icon="pi pi-search" variant="text" />
        <Button :icon="vIcon" variant="text" @click="toggleDardMode" />
        <Button icon="pi pi-bell" variant="text" />
        <Button icon="pi pi-user" variant="text" />
      </div>
    </template>
  </Menubar>


  <router-view v-slot="{ Component }">
    <transition name="fade">
      <component :is="Component" />
    </transition>
  </router-view>

</template>

<style scoped>
.dark .logo {
  filter: invert(1);
}

.logo__text {
  user-select: none;
}

@media screen and (min-width: 1024px) {
  .menu__bar {
    padding-inline: 5%;
  }
}

@media screen and (max-width: 768px) {
  .logo__text {
    display: none;
  }
}


.fade-enter-active{
  transition: opacity .4s;
}
.fade-leave-active {
  transition: opacity .2s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
